<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="1200"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="登录账号">
                <a-input placeholder="请输入登录账号" v-model="queryParam.login"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="用户姓名">
                <a-input placeholder="请输入用户姓名" v-model="queryParam.companyName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                label="归属部门"
              >
                <a-input
                  v-model="queryParam.departCode"
                  placeholder="请输入"
                  type="hidden"/>
                <depart-window-show
                  v-if="visible"
                  :multiple-flag="false"
                  :checkedDepartKeys="queryParam.departCode"
                  @ok="departOk"
                ></depart-window-show>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button
                  type="primary"
                  @click="() => {$refs.table.refresh(true)}"
                  icon="search">查询</a-button>
                <a-button
                  type="gray"
                  @click="() => {this.$objToReset(queryParam),$refs.table.refresh(true)}"
                  icon="reload"
                  style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-row :gutter="12">
          <a-col :md="16" :sm="24">
            <s-table
              style="margin-top: 20px"
              ref="table"
              rowKey="companyId"
              :columns="columns1"
              :data="loadData"
              :alert="options.alert"
              showPagination="auto"
              :loading="loading"
              :clearChoose="false"
              :scroll="{ y: 240 }"
              :rowSelection="options.rowSelection"
              @onSelectAll="handleTableChange"
            >
            </s-table>
          </a-col>
          <a-col :md="8" :sm="24">
            <div style="margin-bottom: 20px;margin-top: 30px">已选用户</div>
            <a-table
              ref="table2"
              rowKey="companyId"
              :columns="columns2"
              :dataSource="selectionRows"
              :loading="loading"
              :scroll="{ y: 240 }"
            >
              <template slot="action" slot-scope="text, record">
                <a @click="handleDelete(record.companyId)">
                  <a>删除</a>
                </a>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </div>
      <!-- table区域-end -->
    </a-modal>
  </div>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import { postAction } from '@/api/manage'
  import DepartWindowShow from '@/components/WxDepartChoose/DepartWindowShow'

  export default {
    name: 'WxSelectCompanyComponent',
    components: {
      Ellipsis,
      STable,
      DepartWindowShow
    },
    props: {
      // 传入已经选择的companyId
      selectIds: {
        type: Array,
        default: () => []
      },
      // 传入已经选择的companyId
      multipleFlag: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        title: '添加已有用户',
        visible: false,
        placement: 'right',
        // 查询条件
        queryParam: {
          departCode: undefined
        },
        // 表头
        columns1: [
          {
            title: '登录账号',
            width: 100,
            dataIndex: 'login'
          },
          {
            title: '用户名称',
            width: 100,
            dataIndex: 'companyName'
          },
          {
            title: '性别',
            width: 50,
            dataIndex: 'sex',
            customRender: (text) => this.$sysDictFilter(text, 'sex')
          },
          {
            title: '电话',
            width: 100,
            dataIndex: 'mobile'
          },
          {
            title: '部门',
            width: 150,
            dataIndex: 'departCode',
            customRender: (text) => this.$getDepartmentName(text)
          }
        ],
        columns2: [
          {
            title: '登录账号',
            width: 100,
            dataIndex: 'login'
          },
          {
            title: '用户名称',
            width: 100,
            dataIndex: 'companyName'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: 50,
            scopedSlots: { customRender: 'action' }
          }
        ],
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        loadData: parameter => {
          return postAction(this.url.getlist, Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        },
        loading: false,
        selectedRowKeys: [],
        selectionRows: [],
        options: {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            onSelect: this.handleTableSelect,
            onSelectAll: this.handleTableSelectAll,
            type: this.multipleFlag ? 'checkbox' : 'radio'
          }
        },
        url: {
          getlist: '/system/company/list',
          getall: '/system/company/allList'
        }
      }
    },
    created () {
    },
    mounted () {
    },
    methods: {
      searchQuery () {
        this.$refs.table.refresh(true)
      },
      // 关闭
      handleCancel () {
        this.clearSelect()
        this.visible = false
      },
      // 清空选择
      clearSelect () {
        this.selectedRowKeys = []
        this.selectionRows = []
        this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
      },
      handleOk () {
        console.log('dataSelectedRowKeys:' + this.selectedRowKeys)
        console.log('dataSelectionRows:' + this.selectionRows)
        this.$emit('ok', [...this.selectedRowKeys], [...this.selectionRows])
        this.clearSelect()
        this.visible = false
      },
      show () {
        this.visible = true
        this.$nextTick(() => {
          if (this.selectIds !== undefined) {
            this.selectedRowKeys = this.selectIds
            console.log(this.selectIds.join(','))
            postAction(this.url.getall, { 'ids': this.selectIds.join(',') }).then(res => {
              this.selectionRows = res.result.data
              this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
            }).finally(() => {
            })
          }
        })
      },
      departOk (val) {
        this.queryParam.departCode = val
      },
      handleTableSelectAll (selected, selectedRows, changeRows) {
        if (selected) {
          const rowKeys = []
          selectedRows.map(x => {
            rowKeys.push(x.companyId)
          })
          this.selectedRowKeys = this.$uniqueTableId(this.selectedRowKeys, rowKeys)
          this.selectionRows = this.$uniqueTable(this.selectionRows, selectedRows, this.selectedRowKeys, 'companyId')
          this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
        } else {
          changeRows.map(x => {
            this.handleDelete(x.companyId)
          })
        }
      },
      // 用户手动选择/取消选择某列的回调
      handleTableSelect (record, selected, selectedRows, nativeEvent) {
        if (selected) {
          if (this.options.rowSelection.type === 'radio') {
            this.selectedRowKeys = [record.companyId]
            this.selectionRows = [record]
            this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
          } else {
            this.selectedRowKeys = this.$uniqueTableId(this.selectedRowKeys, [record.companyId])
            this.selectionRows = this.$uniqueTable(this.selectionRows, [record], this.selectedRowKeys, 'companyId')
            this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
          }
        } else {
          this.handleDelete(record.companyId)
        }
      },
      handleTableChange (pagination, filters, sorter) {
        // 分页、排序、筛选变化时触发
        console.log(sorter)
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
        }
      },
      // 删除
      handleDelete (record) {
        for (var i = 0; i < this.selectionRows.length; i++) {
          if (this.selectedRowKeys[i] === record) {
            this.selectionRows.splice(i, 1)
            this.selectedRowKeys.splice(i, 1)
            break
          }
        }
        this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
      }
    }
  }
</script>
<style lang="less" scoped>

</style>
